Tags: plugin
Edition: creative
Tagline: Automatically trims whitespace off an image using smart edge detection.
Libs: twentytwenty
Icon: cogs
Aliases: /plugins/whitespacetrimmer
Textclass: none


h1 WhitespaceTrimmer plugin
.markdown-body
  p 
    | Trims whitespace (even smooth gradients) from around images automatically using edge detection filters. The current version does not work well with existing transparency. 


- image_width = 600
- image_thumb_width = 100
- example_images = ['017','019','022','023','028','030-alt'].map{|n| "http://z.zr.io/rw/pluginexamples/example-#{n}-whitespace.jpg"}
- normal_query = "width=#{image_width}"
- trimmed_query = "width=#{image_width}&trim.threshold=80&trim.percentpadding=0.5"
- thumbnail_query = "width=#{image_thumb_width}"

.row-fluid
  .span8.well
    div style="position:relative; text-align:center; width:100%;"
      span style="position:absolute; left:0"
        | Original
      span style="position:absolute; right:0"
        | WhitespaceTrimmer
    br
    p
      .twentytwenty-container
        img src="#{example_images.first}?#{normal_query}" id="plugin-example-before"
        img src="#{example_images.first}?#{trimmed_query}" id="plugin-example-after"

    .row-fluid.hidden-phone
      - example_images.each do | img |
        .span2
          p 
            a.plugin-example-button data-image-before="#{img}?#{normal_query}" data-image-after="#{img}?#{trimmed_query}"
              img src="#{img}?#{thumbnail_query}"
    .visible-phone
      - example_images.each do | img |
        a.plugin-example-button data-image-before="#{img}?#{normal_query}" data-image-after="#{img}?#{trimmed_query}"
          img src="#{img}?#{thumbnail_query}" width="55" height="55"
        | &nbsp;
    p 
      | Settings: &amp;trim.threshold = 80 ,  &amp;trim.percentpadding = 0.5

- example_images.each do | img |
  img style="display:none;" src="#{img}?#{trimmed_query}"
.markdown-body
  markdown: 

    ## Usage

    Add `&trim.threshold=80` to an image URL. You'll probably also want to restore a bit of padding with `&trim.percentpadding=0.5` since it's ugly to trim completely to the edge of the object.
    
    The threshold value can usually go all the way up to 255 without cutting off any part of the image. The percentpadding value can be anywhere between 0 and 50, but 0.5-2 is usually the best.

    ## Installation

    Either run  `Install-Package ImageResizer.Plugins.WhitespaceTrimmer` in the NuGet package manager, or:
    
    1. Add ImageResizer.Plugins.WhitespaceTrimmer.dll to your project. Make sure AForge.dll, AForge.Math.dll, and AForge.Imaging.dll are copied also, although they do not need to be referenced directly.
    2.  Add `<add name="WhitespaceTrimmer" />` inside   `<resizer><plugins></plugins></resizer>` in Web.config.
